<template>
	<a-row>
		<!-- <a-row  class='mb28  mt28  pb10'>
			<a-col  :sm='{offset:3,span:10}'>
				<a-steps  >
				    <a-step  v-for='(item,index) in titleData'  :key='index'>
				        <span slot="title">{{item.title}}</span> -->
				      <!-- <template slot="title">
				        {{item.title}}
				      </template>
				      <span slot="description">{{item.description}}</span>
				    </a-step> -->
				    <!-- <a-step title="货物信息" description="This is a description." />
				    <a-step title="Waiting" description="This is a description." /> -->
				<!-- </a-steps> 
			</a-col>
		</a-row> --> 
		<a-form :layout="formLayout"  :form="form"  @submit="handleSubmit">
			<a-form-item  style='display: none;'> 
				 <a-input    v-decorator="[ 'code', baseform.code ]" />
			</a-form-item>
			<a-form-item  style='display: none;'> 
				 <a-input    v-decorator="[ 'prjCode', baseform.prjCode ]" />
			</a-form-item>
			<a-form-item  style='display: none;'> 
				 <a-input     v-decorator="[ 'orderCode', baseform.orderCode ]" />
				 
			</a-form-item>
			<a-form-item  style='display: none;'> 
				 <a-input    v-decorator="[ 'transactionCode', baseform.transactionCode ]" /> 
			</a-form-item>
				
			<a-row>
				<a-col  :xs='{span:24}'  :md='{span:12}'>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        时间 
					      </span>
						<a-date-picker      v-decorator="['date',baseform.date]"  />
					</a-form-item>

					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        出口商 <sup  class='labelsup'>(shipper/exporter)</sup>
					      </span>
						<a-textarea rowspan='5' autosize  v-decorator="['exporter']"  />
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        出口国 <sup   class='labelsup'>(country of export)</sup>
					      </span>
						<a-input placeholder=""  v-decorator="['countryOfExport']" /> 
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        货物原产地 <sup  class='labelsup'>(country of origin goods)</sup>
					      </span>
						<a-input placeholder=""  v-decorator="['origin']" /> 
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        最终抵运目的国 <sup  class='labelsup'>(country of ultimate destination)</sup>
					      </span>
						<a-input placeholder=""  v-decorator="['destination']" /> 
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        贸易条款 <sup  class='labelsup'>(trade terms)</sup>
					      </span>
						<a-radio-group @change="" v-decorator="['tradeTerms']" >
						    <a-radio  value="1">CIF</a-radio>
						    <a-radio  value="2">FOB</a-radio>
						    <a-radio  value="3">DAP</a-radio>
						    <!-- <a-radio  value="4">
						      More...
						      <a-input v-if="tradeTerms === 4" style="width: 100px" />
						    </a-radio> -->
						  </a-radio-group>
					</a-form-item>
				</a-col>
				<a-col  :xs='{span:24}'  :md='{span:12}'>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        合同号 
					      </span>
						<a-input  v-decorator="['contractCode',baseform.contractCode]"/>
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        收件方 <sup class='labelsup'>(consignee)</sup>
					      </span>
						<a-textarea rowspan='5' autosize   v-decorator="['consignee']"/>
					</a-form-item>
					<a-form-item 
							:label-col="formItemLayout.labelCol"
							:wrapper-col="formItemLayout.wrapperCol"
					>
						<span slot="label"  style="position: relative;">
					        进口商 <sup  class='labelsup'>(importer if other than consignee)</sup>
					      </span>
						<a-textarea rowspan='5' autosize   v-decorator="['importer']"/>
					</a-form-item>
					
				</a-col>
			</a-row>
		     
			
		      <a-form-item

		        :wrapper-col="buttonItemLayout.wrapperCol"
		      >
		      	<router-link :to="{path:'/order/detail',query:{code:orderCode}}"> <a-button  class='mr20'> 取消 </a-button></router-link>
		        <a-button type="primary"  html-type="submit"  class='mr20' >
		          保存
		        </a-button> 
		        
		      </a-form-item>
    	</a-form>

    	<a-modal title="提示" v-model="visible" @ok="handleOk"  @cancel='handleCancel'>
	      <p>{{currentTip}}</p>
	    </a-modal>
	</a-row>
	 
</template>

<script>
import  loadSelect  from  '@/components/common/loadSelect'

import { customerList }  from  '@/api/customer/index'
import { submitOrder,detailOrder,submitContractFile }  from  '@/api/order/index'
import moment from 'moment'

export default {
  name: 'orderContractAdd',
  data () { 
    return {
    	orderCode:'',
    	transactionCode:'',
    	prjCode:'',
    	isEdit:false,//页面当前状态
    	/*form  布局*/
      	formLayout:'horizontal',
      	formItemLayout:{
      		labelCol: {xs:{ span :24},md:{span:5},lg:{ span: 7 }},  //label 标签布局
        	wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, 
      	},
 
      	titleData:[
      		{title:'交易主体及要素录入',description:''},
      		{title:'订单货物信息录入',description:''},
      	],
      	value:1,
      	 formItemLayoutWithOutLabel: {   //新增联系人label
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            md: { span: 16, offset: 5 },
            lg: { span: 14, offset: 7 },
            xl: { span: 11, offset: 7 },
            xxl: { span: 8, offset: 7 },
          },
        },
      	id:0,

      	/*form-rule*/
	    baseform:{
      		code: {initialValue:''}, 
      		orderCode: {initialValue:''}, 
      		transactionCode: {initialValue:''}, 
      		prjCode: {initialValue:''}, 

      		date: {initialValue:null,rules:[{required:true,message:"请选择日期"}]},  
      		exporter: {initialValue:''},  
      		countryOfExport: {initialValue:''},  
      		origin: {initialValue:''},  
      		destination: {initialValue:''},  
      		tradeTerms: {initialValue:''},  

      		contractCode:{initialValue:'',rules:[{required:true,message:'请输入合同编号'}]},
      		consignee: {initialValue:''},  
      		importer: {initialValue:''},  
      	},
      	//基本信息form
      	baseInfo:{
      		supName:'',
      	},
  

      	//modal框
      	visible:false,
      	currentTip:'',            

      	/*动态select id设置*/
      	tradeId:1,                                                
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);  
  },
  created(){ 
  	this.orderCode = this.$route.query.code 
  	this.transactionCode = this.$route.query.transactionCode 
  	if(this.$route.query.isEdit == true){
  		this.isEdit = true
  	}
  	this.pageInit()
  },
  mounted(){
  	
  },
  methods:{
  	pageInit(){ 
  		 detailOrder(this.orderCode).then((res)=>{ 
					if(res.data.flag == true){
						let data  = res.data.data   
						 
						this.form.setFieldsValue({
							orderCode:this.orderCode,
							transactionCode:this.transactionCode,
							prjCode:data.prjCode,

							
							exporter:data.exporter,
							countryOfExport:data.countryOfExport,
							origin:data.origin,
							destination:data.destination,
							tradeTerms:data.tradeTerms, 
							 
							consignee:data.consignee,
							importer:data.importer,
						}) 
						if(this.isEdit == true){
							data.transactionVOList.forEach((item)=>{
							if(item.code == this.transactionCode){
									this.form.setFieldsValue({
										contractCode:item.contractVO.contractCode,
										code:item.contractVO.code,//合同code
										date:moment(item.contractVO.date),
									})
								}
							}) 
						}
						

					}
				})
  	},
 
    handleOk(){ 
    	this.$router.push("{path:'/order/cargoadd',query:{code:record.code,isEdit:"+this.isEdit+"}}")
    },
    handleCancel(){ 
    	this.$router.push('/order')
    },
  	beforeUpload(file,fileList){
  		console.log(file,fileList)
  	},
  	/*提交表单*/
	handleSubmit (e) {
		let url
		e.preventDefault();
		// console.log(this.form.getFieldsValue())
		this.form.validateFields((err, values) => {
			if (!err) { 
					console.log(this.isEdit)
					if(this.isEdit == true){
						url='/op/contract/modify_contract'//修改 合同
					}
					else{
						url='/op/contract/create_contract' 
					}
					 
				   submitContractFile(url,values).then((res)=>{
				   	if(res.data.flag == true){
				   		this.$message.success(res.data.msg)
				   		this.$router.push({path:'/order/cargoadd',query:{code:this.orderCode,transactionCode:this.transactionCode}})
				   	}
			   })
			}
			else{
				console.log(err)
			}
		});
	},
		
	     
  },
	computed: {
		
		buttonItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			wrapperCol: { span: 14, offset: 7 },
			} : {};
		},
		
	},
  components: {
  	loadSelect
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.ant-input{width: 200px;}*/
.labelsup{right:-6px;position: absolute;top:22px}
</style>
